<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

        <table border="1" cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <td>userId</td>
                        <td>用户名</td>
                        <td>密码</td>
                    </tr>


                </thead>
                <tbody id="tbody" >


                </tbody>

        </table>
        <button onclick="loadUserList()">加载数据</button>
        <button onclick="alert('异步')">测试</button>


        <script >
            function loadUserList(){
                //从js发起请求
                // http://127.0.0.1:8080/web/user_list

                let xhr =   new XMLHttpRequest();

                // let url = "http://127.0.0.1:8080/web/user_list"
                //简写
                let url = "user_list"
                let async = true; //异步

                //在发送之前  设置一下  响应回来的时候  执行的代码     onready 函数
                xhr.onreadystatechange = (event)=>{

                    if(xhr.status == 200 && xhr.readyState == 4){


                        //json 字符串的表示形式
                        let jsonStr = xhr.responseText;

                        let userArray = eval(jsonStr);


                        console.log(jsonStr);
                        console.log(userArray);
                        var tbody = document.querySelector("#tbody");
                        for (let i = 0; i < userArray.length ; i++) {
                            let user = userArray[i];
                            console.log(user.userId);
                            console.log(user.username);
                            console.log(user.password);
                            let tr = document.createElement("tr");
                            tr.innerHTML = `
                            <td>${user.userId}</td>
                            <td>${user.username}</td>
                            <td>${user.password}</td>

                        `
                            tbody.appendChild(tr);
                        }


                    }




                }



                //打开
                xhr.open("GET", url, async);

                //获取内容     ---
                xhr.send();


                //执行到此行的时候 ，请求 没有正常返回呢








            }
        </script>
</body>
</html>